<template>
    <div class="demo-tabs-style1">
        <Tabs :animated="false" v-model="choseTab">
            <TabPane label="画布" name="canvas">
                <div class="padding">
                    <div class="el">
                        <div class="title">画布名称</div>
                        <Input v-model="canvas.base.name" placeholder="画布名称" size="small"></Input>
                    </div>
                    <div class="el">
                        <div class="title">画布宽</div>
                        <Input v-model="canvas.base.width" placeholder="画布宽" size="small" type="number"></Input>
                    </div>
                    <div class="el">
                        <div class="title">画布高</div>
                        <Input v-model="canvas.base.height" placeholder="画布高" size="small" type="number"></Input>
                    </div>
                    <div class="el">
                        <div class="title">
                            画布背景色
                        </div>
                        <Color v-model="canvas.base.background"></Color>
                    </div>
                    <div class="el">
                        <div class="title">画布背景图</div>
                        <Input v-model="canvas.base.backgroundImage" placeholder="画布背景图" size="small"></Input>
                    </div>
                    <div class="el">
                        <div class="title">报表打开地址：</div>
                        <div></div>
                    </div>
                    <div class="el">
                        <Button type="primary" @click="save">保存</Button>
                        <Button type="primary" @click="view">预览</Button>
                        <Button type="primary" @click="double">双屏开发</Button>
                    </div>
                </div>

            </TabPane>
            <TabPane label="配置" name="config">
                <div class="padding">
                    <div v-if="JSON.stringify(choseConfig) != '[]'">
                        <div>
                            <span class="title">组件名称</span>
                            <Input v-model="choseConfig.zhName" size="small"
                                   placeholder="组件名称" clearable/>
                            <span class="title">长</span>
                            <Input v-model="choseConfig.width" size="small"
                                   placeholder="组件宽" type="number"/>
                            <span class="title">宽</span>
                            <Input v-model="choseConfig.height" size="small"
                                   placeholder="组件高" type="number"/>
                            <span class="title">左边</span>
                            <Input v-model="choseConfig.left" size="small"
                                   placeholder="组件左边距" type="number"/>
                            <span class="title">顶部</span>
                            <Input v-model="choseConfig.top" size="small"
                                   placeholder="组件右边距" type="number"/>
                            <span class="title">uuid：</span><span>{{ choseConfig.uuid }}</span>
                        </div>
                        <div v-for="item in choseConfig.config" style="min-height: 30px;margin-top: 5px;">
                            <span class="title">{{ item.name }}</span>
                            <div v-if="item.type == 'color'">
                                <Color v-model="item.value"></Color>
                            </div>
                            <Input v-model="item.value" v-if="item.type == 'data'" size="small"
                                   placeholder="excel数据区域" @on-focus="choseCell(item)" clearable
                                   @on-click="clearValue(item)"/>
                            <Input v-model="item.value" v-if="item.type == 'text'" size="small"
                                   placeholder="值" suffix="ios-brush"/>
                            <Slider v-model="item.value" v-if="item.type == 'size'"></Slider>
                            <Select v-model="item.value" size="small" style="width:230px"
                                    v-if="item.type == 'select'">
                                <Option v-for="item in item.config" :value="item.value" :key="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                            <Select v-model="item.value" multiple style="width:260px" v-if="item.type == 'component'">
                                <Option v-for="item in canvas.data" :value="item.uuid" :key="item.zhName">{{
                                    item.zhName
                                    }}
                                </Option>
                            </Select>
                        </div>
                        <div class="delete">
                            <Button type="primary" @click="deleteComponent">删除</Button>
                        </div>
                    </div>
                </div>
            </TabPane>
            <TabPane label="组件" name="coponent">
                <div class="padding">
                    <div v-for="item of components" @click="addComponent(item)"
                         :title="item.message"
                         class="component-el">
                        <img :src="item.icon" alt="">
                        <div>
                            {{ item.Zh }}
                        </div>
                    </div>
                </div>

            </TabPane>
        </Tabs>
    </div>
</template>
<script>
    import Color from './Color.vue'
    import {Canvas} from '../entity/Canvas';

    /**
     * 配置项
     */
    export default {
        name: "Config",
        props: ['luckysheet'],
        data() {
            let canvas = new Canvas();
            return {
                components: init,
                canvas: canvas.getCanvasInfo(),
                choseTab: 'canvas',
                choseConfig: [],
                choseCellValue: {}
            }
        },
        components: {
            Color,
        },
        methods: {
            save() {

            },
            addComponent(item) {
                let canvas = new Canvas();
                var that = this;
                canvas.addComponent(item, () => {
                    this.choseConfig = this.canvas.data[this.canvas.data.length - 1];
                    // 选中当前组件
                    for (var el of this.canvas.data) {
                        el.showDownUp = false;
                    }
                    this.canvas.data[this.canvas.data.length - 1].showDownUp = true;
                })
                this.$store.state.tab = 'config'

            },
            choseConfigFun(item) {
                this.choseConfig = item;
            },
            choseCell: function (item) {
                this.choseCellValue = item;
                if (item.value != "") {
                    this.luckysheet.setRangeShow(item.value);
                }
                this.$emit("canvasChange", false);
                this.$emit("openModel", true)
            },
            sureCell: function (cell) {
                this.choseCellValue.value = cell;
            },
            deleteComponent: function () {
                this.$emit("deleteComponent", this.choseConfig.uuid);
                this.choseConfig = [];
            },
            view: function () {
                window.open("/#/view");
            },
            double:function (){
                window.open("/#/double");
            }
        }, watch: {
            canvas: {
                handler(newVal, oldVal) {
                    this.$emit('input', newVal);
                },
                immediate: true,
                deep: true
            },
            tab: {
                handler(newVal, oldVal) {
                    this.choseTab = newVal;
                },
                immediate: true,
                deep: true
            },
            choseTab: {
                handler(newVal, oldVal) {
                    this.$store.state.tab = newVal;
                },
                immediate: true,
                deep: true
            },
            choseConfig: {
                handler(newVal, oldVal) {
                    this.$emit("dataChange");
                },
                immediate: true,
                deep: true
            }

        },
        computed: {
            tab() {
                return this.$store.state.tab;
            },
        }
    }
</script>

<style lang="scss">
    .ivu-layout-sider-children {
        background: #fff;
    }

    .demo-tabs-style1 > .ivu-tabs {
        background-color: #fff;
    }

    .ivu-layout-sider {
        background-color: #fff;
    }

    .ivu-tabs-content {
        max-height: calc(100vh - 80px);
        overflow-y: scroll;
    }

    .component-el {
        width: 70px;
        height: 80px;
        text-align: center;
        float: left;

        img {
            height: 50px;
            width: 50px;
        }
    }

    .title {
        font-size: 14px;
        color: #515a6e;
        line-height: 20px;
        height: 20px;
        margin: 10px 0px;
        display: block;
    }

    .padding {
        padding: 0px 10px;

        .el {
            height: 60px;
        }
    }

    .delete {
        margin-top: 20px;
    }
</style>
